<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <link rel="stylesheet" type="text/css" href="/src/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/src/css/main.css">
    <link ref="stylesheet" type="text/css" href="/src/css/makeTemplate.css">
    <link rel="stylesheet" type="text/css" href="/src/font_937327_r18sptk9ohi/iconfont.css">
</head>

<body>
    <div id="makeTemplateVue" class="wrapper">
        <embed class="embed-wrapper" src="../top.html" />
        <div class="container">
            <div class="alert alert-danger" role="alert">
                <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
                <span class="sr-only">Error:</span>
                提示：如果上传样板图或者款式图，您需要等待两天获取报价
            </div>
            <!-- 拼接模板 -->
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4>拼接款式</h4>
                </div>
                <div class="panel-body">
                    <div class="partView" id="partView">

                    </div>
                    <div class="btn-group" role="group" aria-label="...">
                        <button type="button" class="btn btn-default" onClick="toDisplay()">拼合款式图</button>
                        <button type="button" class="btn btn-default" onClick="choosePart('领型')">换领型</button>
                        <button type="button" class="btn btn-default" onClick="choosePart('袖型')">换袖型</button>
                        <button type="button" class="btn btn-default" onClick="choosePart('袖衩')">换袖衩</button>
                        <button type="button" class="btn btn-default" onClick="choosePart('下摆')">换下摆</button>
                    </div>

                    <div>
                        <h3>款式描述</h3>
                        <h2>标准衬衫</h2>

                        <embed id="myembed" src="/src/svg/BJT2.svg" width="100%" height="420" type="image/svg+xml"
                            pluginspage="http://www.adobe.com/svg/viewer/install/" />
                        <span class="glyphicon glyphicon-fullscreen" style=" font-size: 30px;
                            float: right;" aria-hidden="true" onclick="bigger()"></span>
                    </div>
                </div>
            </div>
            <!-- 上传款式图 -->
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4>上传款式图</h4>
                </div>
                <div class="panel-body">

                    <div class="alert alert-default" role="alert">
                        <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
                        <span class="sr-only">Error:</span>
                        提示：为了更好的为您服务，请您上传jpg、png、jspg等图片格式，如有ai图crow等款式文件，请上传该款式文件
                    </div>
                    <div class="row">
                        <div class="col-lg-4">
                            <a href="#" class="thumbnail upContent">
                                <img src="/src/images/addImg.png" alt="上传图片">
                            </a>
                        </div>
                        <div class="col-lg--8 upFile">
                            <input type='file'>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 上传样板图-->
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4>上传样板图</h4>
                </div>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-lg-12">
                            <input type='file'>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 款式描述 -->
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4>款式描述</h4>
                </div>

                <div class="panel-body">
                    <div class="alert alert-default" role="alert">
                        <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
                        <span class="sr-only">Error:</span>
                        提示：添加款式描述可及时获得报价
                    </div>
                    <div class="input-group input-group-lg">
                        <span class="input-group-addon" id="basic-addon1">描述：</span>
                        <input type="text" class="form-control" placeholder="款式描述" aria-describedby="basic-addon1">

                        <!-- <p style="white-space: pre-line;">{{ message }}</p>
                                        <br>
                                        <textarea v-model="message" placeholder="请输入款式描述"></textarea> -->
                    </div>
                </div>
            </div>


            <div class="goNext">
                <button class="btn btn-success" @click="goNext">确定</button>
            </div>


        </div>
        <embed class="embed-wrapper" src="../footer.html">
    </div>

</body>
<script src="/src/js/jquery.min.2.1.4.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="/src/js/common.js"></script>
<script src="/src/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="/src/js/ssvg.js"></script>
<script src="/src/js/enlargeImg.js"></script>
<script type="text/javaScript">

        var makeTemplateVue = new Vue({
            el:'#makeTemplateVue',
            data:function(){
                return{

                }
            },
            methods:{
                goNext: function () {
                    window.location.href="makeBulkOrder.html"
                },
            }
        })







// 以下代码是针对svg的操作---------------------
    var htmlObj,SVGDoc,SVGRoot,viewBox,innerSVG;
  		var svgns="http://www.w3.org/2000/svg";
          var PartName;
          
  		function Initialize(){
            //   debugger;
  			htmlObj = document.getElementById("myembed");
  			if (htmlObj == null){
  				// alert("没找到");
  			}
  			//SVGDoc = document.getElementById('myembed').getSVGDocument();
  			SVGDoc = htmlObj.getSVGDocument();
  			if (SVGDoc == null){
  				// alert("不成功");
  			}
  			SVGRoot = SVGDoc.documentElement;
  			
  		}//end function Initialize()
  		
  		function treeTravel(el){
  			for (var i=0;i<el.length;i++)
         {
          var xx=el[i].childNodes;			
					if(xx.length>0){
               for (var j=0;j<xx.length;j++)
               {
									if(xx[j].nodeName){
										console.log(xx[j].nodeName)
										switch(xx[j].nodeName)
									{
										case "path":
											classReplace(xx[j]);
											pathReplace(xx[j],-18164.71472,270.75878,6.11134767);
										break;
										case "line":
											classReplace(xx[j]);
											lineReplace(xx[j],-18164.71472,270.75878,6.11134767);
										break;
										case "polyline":
											classReplace(xx[j]);
											polylineRe(xx[j],-18164.71472,270.75878,6.11134767);
										break;
										case "g":
											var yy=xx[j].children;
										// debugger;
											treeTravel(yy);
										break;
										default:
									}
								}
               }
         }
  		}
            }
            
  		function displayPart(part){
  		  
  		  SVGDoc.getElementById(part).setAttribute("display","block");
  		}
				// partImg:替换对象
  		function changePart(partImg){
  			// debugger;
  			var partNode=SVGDoc.getElementById('翻领');
				console.log("特征元素"+partNode);
  			var partParent=partNode.parentNode;
				// 特征呀元素
  			var eigenPath=SVGDoc.getElementById("特征");
				// 特征元素的高宽等位置坐标
  			var eigenRect=eigenPath.getBoundingClientRect();
  			var x1top=eigenRect.top;
  			var x1left=eigenRect.left;
  			var x1bottom=eigenRect.bottom;
  			var x1right=eigenRect.right;
				console.log("替换特征:"+x1top+'-'+x1left+'-'+x1bottom+'-'+x1right);
  			partParent.removeChild(partNode);
				
				// 拷贝立领
  			var rpSVGDoc=partImg.getSVGDocument();
  			var rpNode=rpSVGDoc.getElementById('立领').cloneNode(true);
  			var gObject=document.createElement("g");
  					gObject=rpNode;
  			var success=partParent.appendChild(gObject);
  			
  			var xx=rpNode.childNodes;
  			// debugger;
  			treeTravel(xx);
  			
				// 被替换对象的特征元素位置
  			eigenPath=SVGDoc.getElementById("特征");
  			eigenRect=eigenPath.getBoundingClientRect();
  			var x2top=eigenRect.top;
  			var x2left=eigenRect.left;
  			var x2bottom=eigenRect.bottom;
  			var x2right=eigenRect.right;
				console.log("被替换特征:"+x2top+'-'+x2left+'-'+x2bottom+'-'+x2right);
  			var sx=(x1right-x1left)/(x2right-x2left);
  			var sy=(x1bottom-x1top)/(x2bottom-x2top);
  			var xOffset=x1left-x2left;
  			var yOffset=x1top-x2top;
  			
  		}
  		function choosePart(PartName){
  			var alertword = "换"+PartName+"功能还没开发好，大哥！";
  			if (PartName == "领型") {
  				 //alert(alertword);
  				 var partImg1=document.createElement('img');
  				 partImg1.src='/src/svg/领口1.svg';
  				 //partImg1.onclick=function(){changePart()};
  				 var rongqi=document.getElementById('partView');
  				 rongqi.appendChild(partImg1);
  				 var partImg2=document.createElement('iframe');
  				 partImg2.src='/src/svg/领口2.svg';
  				 partImg2.height='100';
  				 partImg2.width='100';
  				 //partImg2.type="image/svg+xml";
  				 partImg2.id="立领图";
  				 //partImg2.onclick=function(){changePart()};
  				 rongqi.appendChild(partImg2);
  				 IframeOnClick.track(document.getElementById("立领图"), function() { changePart(partImg2); }); 

  				}
  			else if (PartName == "袖型") {
  				 alert(alertword);
  				}
  			     else if (PartName == "袖衩") {
  				 alert(alertword);
  				}
  				        else if (PartName == "下摆") {
  				 alert(alertword);
  				}
  				             else {
  				 alert("说人话！");
  				}
  		}
var IframeOnClick = {  
    resolution: 2000,  
    iframes: [],  
    interval: null,  
    Iframe: function() {  
        this.element = arguments[0];  
        this.cb = arguments[1];   
        this.hasTracked = false;  
    },  
    track: function(element, cb) {  
        this.iframes.push(new this.Iframe(element, cb));  
        if (!this.interval) {  
            var _this = this;  
            this.interval = setInterval(function() { _this.checkClick(); }, this.resolution);  
        }  
    },  
    checkClick: function() {  
        if (document.activeElement) {  
            var activeElement = document.activeElement;  
            for (var i in this.iframes) {  
                if (activeElement === this.iframes[i].element) { // user is in this Iframe  
                    if (this.iframes[i].hasTracked == false) {   
                        this.iframes[i].cb.apply(window, []);   
                        this.iframes[i].hasTracked = true;  
                    }  
                } else {  
                    this.iframes[i].hasTracked = false;  
                }  
            }  
        }  
    }  
};  
  		 function toDisplay(){
  			if (SVGDoc == null){
  				alert("不成功");
  			}
  			var part = "左前片";
  			displayPart(part);
  			var part1 = "右前片";
        setTimeout(function(){displayPart(part1);},1000);
  			//setTimeout("displayPart("+part1+")",5000);
  			//displayPart(part1);
  			var part2 = "门襟";
  			setTimeout(function(){displayPart(part2);},1000);
  			//displayPart(part2);
  			var part3 = "左口袋";
  			setTimeout(function(){displayPart(part3);},1000);
  			var part4 = "左育克过肩";
  			setTimeout(function(){displayPart(part4);},1000);
  			var part5 = "右育克过肩";
  			setTimeout(function(){displayPart(part5);},1000);
  			var part6 = "左袖前";
  			setTimeout(function(){displayPart(part6);},1000);
  			var part7 = "右袖前";
  			setTimeout(function(){displayPart(part7);},1000);
  			var part8 = "左袖克夫";
  			setTimeout(function(){displayPart(part8);},1000);
  			var part9 = "右袖克夫";
  			setTimeout(function(){displayPart(part9);},1000);
  			var part10 = "翻领";
  			setTimeout(function(){displayPart(part10);},1000);
  			  			
  		}
  		
          $(function(){
            Initialize();
          })

</script>

</html>